<template>
  <view>
    <view class="empty-cart" v-if="cart.length===0">
      <image src="../../static/cart-empty.png"></image>
      <view class="empty-text">购物车是空的哦~~~</view>
    </view>
    <view style="padding-bottom: 50px;" v-else>
      <!-- 选择收货地址 -->
      <myAddress></myAddress>
      <!-- 购物车标题 -->
      <view class="cart-title">
        <uni-icons type="shop" size="18"></uni-icons>
        <text>购物车</text>
      </view>
      <!-- 购物车列表 -->
      <view class="cart-list">
        <uni-swipe-action>
          <block  v-for="(goods,i) in cart" :key="i">
              <uni-swipe-action-item :right-options="options" @click="onClick(goods)">
                <view class="cart-item">
                  <view class="cart-img">
                    <radio :checked="goods.goods_state"  color="#42b983" @click="updateStatus(goods)"></radio>
                    <image :src="goods.goods_small_logo"  mode="widthFix"></image>
                  </view>
                  <view class="cart-info">           
                    <view class="cart-bottom">
                      <view class="cart-price">￥{{goods.goods_price  | price}}</view>
                      <uni-number-box :min="0" :max="9" :value="goods.goods_count"  background="#efefef" @change="numChangeHandle" @click="handle(goods)"></uni-number-box>
                    </view>
                    <view class="cart-text">{{goods.goods_name}}</view>
                  </view>
                </view>
              </uni-swipe-action-item>
          </block>
        </uni-swipe-action>
      </view>
      <mySettle></mySettle>
    </view>
  </view>
</template>

<script>
import badge from '../../mixins/tabbar-badge.js'
import {mapState,mapMutations} from 'vuex'
  export default {
    mixins:[badge],
    computed:{
      ...mapState('my_cart', ['cart'])
    },
    filters:{
      // 商品价格
      price(num){
        return num === 0 ? 99.99 : Number(num).toFixed(2)
      }
    },
    data() {
      return {
       value:0,
        options:[{
                   text: '删除',
                   style: {
                       backgroundColor: '#007aff'
                   }
               }],
      };
    },
    methods:{
      ...mapMutations('my_cart', ['updateGoodsState', 'updateGoodsNum','removeCart']),
      // 改变购物车商品选中状态
      updateStatus(goods){
        goods.goods_state = !goods.goods_state
        this.updateGoodsState(goods)
      },
      // 监听商品数量改变
      numChangeHandle(value){
        this.value = value
      },
      handle(goods){
        goods.goods_count = this.value
         this.updateGoodsNum(goods)
        // if(this.value === 0){
        //   goods.goods_state = false
        //   this.updateGoodsState(goods)
        // }else{
        //   goods.goods_state = true
        //   this.updateGoodsState(goods)
        // }
      },
      onClick(goods){
        this.removeCart(goods.goods_id)
      }      
    },
  }
</script>

<style lang="scss">
.cart-title{
  padding: 5px;
  text{
    font-size: 14px;
    margin-left: 5px;
  }
}

.cart-list{
  width: 100%;
  box-sizing: border-box;
  background-color: #efefef;
  .cart-item{
    display: flex;
    margin: 5px 0;
   background-color: white;
    padding: 5px;
    .cart-img{
      display: flex;
      justify-content: space-between;
      align-items: center;
      image{
        width: 100px;
        height: 100px;
      }
    }
    .cart-info{
      display: flex;
      flex-direction:column-reverse;
      .cart-text{
        font-size: 12px;
        margin: 5px;
      }
      .cart-bottom{
        display: flex;
        margin-top: 10px;
        .cart-price{
          color: red;
          margin-left: 5px;
        }
      }
      
    }
  }
}

.empty-cart{
  display: flex;
  align-items: center;
  width: 100%;
  height: 100px;
  margin-top: 150px;
  transform: translateX(30%);
  image{
    width: 25px;
    height: 25px;
  }
  .empty-text{
    font-size: 12px
  }
}
</style>
